<template>
  <div class="a0">
    <div>
      <van-nav-bar
          fixed
          title="确认订单"
          left-text=""
          left-arrow
          @click-left="onClickLeft"
          class="b1"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          .
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="a1" v-for="a in t_address">
      <div class="a3"></div>
      <div style="float: right"><label> {{ a.address }}
        <van-icon name="arrow" @click="tz"/>
      </label><br>
        <label style="margin-right: 215px;font-size:13px"> {{ a.name }} {{ a.phone }}</label>
      </div>
    </div>

    <div></div>
    <div class="a2">
      <div class="a3"></div>
      <label style="margin-right: 82px;">送达时间 </label>
      <label style="color:#6FC36C ;font-size:13px">尽快送达（预计20分钟）</label>
      <label>
        <van-icon name="arrow"/>
      </label>
    </div>

    <div class="a5">
      <div style="margin-top: 15px;">

        <sapan>
          <img alt="order logo"
               src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F11%2F18%2Fa3628f51813d9d35be34aa3345957f97.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659172785&t=f8a2c555204e14a0cc11021d3489921b"
               width="50" height="50" style="margin-right: 3%">
        </sapan>
        <sapan>
          <img alt="order logo"
               src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F11%2F18%2Fa3628f51813d9d35be34aa3345957f97.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659172785&t=f8a2c555204e14a0cc11021d3489921b"
               width="50" height="50" style="margin-right: 3%">
        </sapan>
        <sapan>
          <img alt="order logo"
               src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F11%2F18%2Fa3628f51813d9d35be34aa3345957f97.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659172785&t=f8a2c555204e14a0cc11021d3489921b"
               width="50" height="50" style="margin-right: 30%">
        </sapan>
        <label>共3件
          <van-icon name="arrow"/>
        </label>
      </div>
    </div>
    <div class="a4">
      <div
          style="margin-right: 250px;font-size: 10px;background-color: #45C36C;color: #F3FFF6;border: 1px solid gainsboro;border-radius: 5px;">
        <label style="font-size:10px">开绿卡会员享优惠</label><br>
      </div>
      <br>
      <label>
        <label>
          <van-checkbox-group v-model="checked">
            <van-checkbox name="按钮" label-position="left" style="float: right;font-size:14px;margin-right: 15px"
                          label-disabled>￥88.00/年
            </van-checkbox>
          </van-checkbox-group>
        </label>
        <label style="margin-right: 5%;font-size:14px">开绿卡会员，本单最高可减0.10元</label>
      </label>
      <br>
      <label style="font-size:14px;margin-right:13%">开绿卡会员，每天可领免费菜</label>
    </div>

    <div class="a6">
      <div class="a3"></div>
      <label style="margin-right: 60%">商品金额 </label>
      <label style="font-size:13px ">￥8848.00</label>
    </div>

    <div class="a7">
      <div class="a3"></div>
      <label style="margin-right: 60%">商品金额 </label>
      <label style="font-size:13px ">￥00.0</label>
    </div>
    <div class="a8">
      <div class="a3"></div>
      <label style="margin-right: 40%">商品金额 </label>
      <label style="font-size:13px ">共0张，0张可用</label>
      <label>
        <van-icon name="arrow"/>
      </label>
    </div>

    <div>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="支付方式" name="1" class="a9">
          <van-radio-group v-model="checked">
            <van-cell-group inset>

              <van-cell title="微信" clickable @click="checked = '3'">

                <template #right-icon>

                  <van-radio name="3"/>
                </template>
              </van-cell>
              <van-cell title="支付宝" clickable  @click="checked = '4'">
                <template #right-icon>
                  <van-radio name="4" label-disabled/>
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="a10">
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="info" label="备注" readonly="true" border="true" placeholder="选填，可以告诉我们您的特殊需求"
                   right-icon="arrow" @click="message"/>
      </van-cell-group>
    </div>

    <div class="a10">
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="value" label="备注" readonly="true" placeholder="订单支付成功后，可申请开发票"/>
      </van-cell-group>
    </div>

    <div class="a10">
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="value" label="安心保障" readonly="true" border="true"/>
      </van-cell-group>
    </div>

    <div>
      <van-cell-group inset class="a11">
        <!-- 输入任意文本 -->
        <van-field v-model="text" label="超时补偿" left-icon="youzan-shield"/>
        <van-field v-model="text" placeholder="    超时十分钟获赔300积分"/>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="text" label="缺重退款" left-icon="youzan-shield"/>
        <van-field v-model="text" placeholder="    分拣时如商品实际重量不足，按缺重比例自动退款"/>
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field v-model="text" label="安心退换" left-icon="youzan-shield"/>
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field v-model="text" placeholder="    收货后如商品有质量问题，可申请退换货"/>
      </van-cell-group>

    </div>

    <div class="a99">
      <van-submit-bar  :price="884800" button-text="立即支付" @click="tz2(info)"/>
    </div>


  </div>
</template>
<script>
import {ref} from 'vue';

export default {
  name: 'PayView',
  mounted() {
    this.money = this.$route.query.allPrice
    this.goods = JSON.parse(this.$route.query.buygoods)
    //请求接口
    this.axios.get("/adress/selectall.do?id=1").then(r => {
      if (r.data.code == 200) {
        console.log(r.data)
        this.t_address = r.data.data;
      }
    })
  },
  data() {
    return {
      zfb:1,
      // info: "",
      order:{
        name:"",
        addid:1,
        info:"多放辣",
        gprice:120,
        gimage:"123123",
        gname:"123123",
        goods:[
          {
            gid:1,
            gnum:2,
          },{
            gid:2,
            gnum:2,
          }
        ],
      },
      pay:{
        no:"",
        money:0,
        title:""
      },
      money:0,

      t_address: [
        {
          name: "",
          phone: "",
          address: "",
        }
      ]
    }
  },
  setup() {
    const onSubmit = () => Toast('点击按钮')
    const checked = ref(['3'], ['4'], ['按钮'])
    const activeNames = ref(['1'])
    const value = ref('');
    const onClickLeft = () => history.back();
    return {
      onSubmit,
      checked,
      activeNames,
      onClickLeft,
      value,
    };
  },
  methods: {
    tz() {
      this.$router.push("/about")
    },
    tz2(info) {
      this.$router.push({path: "/payfor", query: {info: info}});
    },
    message() {
      this.$router.push(("/remarks"))
    }
  }

}
</script>

<style scoped lang="less">
.b1 {
  background-color: #26C757;
}

.b2 {
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
}

.my-swipe .van-swipe-item {
  color: #26C757;
  font-size: 20px;
  line-height: 100px;
  text-align: center;
  background-color: #26C757;
}

.a0 {
  background-color: #F5F5F5;
  width: 100%;
  height: 1300px;

}

.a1 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 100px;
}

.a2 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 50px;
}

.a3 {
  width: 100%;
  height: 30%;
}

.a4 {
  background-color: #EDF3EF;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 100px;
}

.a5 {
  background-color: #FFFFFF;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 80px;
}

.a6 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 40px;
}

.a7 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 40px;
}

.a8 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 40px;
}

.a9 {
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
  margin-bottom: 5px;
}

.a10 {
  background-color: white;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  //box-shadow: 5px 5px 3px gainsboro;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 50px;
}

.a11 {
  margin-bottom: 100px;
  width: 90%;
  margin-left: 5%;
}

.a99 {

}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

</style>